<template>
	<view class="container ">
		<view class="content-wrap">
			<view class="item-box" v-for="item in listData" :key="item">
				<view class="left">
					<image class="img-avatar" :src="item.user_avatar" mode=""></image>
					<view class="info">
						<view class="name">
							{{item.nick_name}}
						</view>
					</view>
				</view>
				<view class="right">

				</view>

			</view>
			<u-loadmore :status="refreshStatus" />
		</view>
	</view>
</template>

<script>
	import Refresh from '@/mixins/refresh'
	export default {
		mixins: [Refresh],
		components: {},
		data() {
			return {
				id: '',
				listData: null
				
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getList(false);
		},
		methods: {
			getList(status) {
				// group_user
				this.$Net.get(this.$api.group_user, {
					group_id: this.id
				}, 1).then(res => {
					console.log(res);
					this.setStatus(res.count, res.list, status);
				})
			},
			onConfirm() {
				this.modalShow = false;
			},
			onCancel() {
				this.modalShow = false;
			},
			onInterest() {
				this.modalShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-top: 36rpx;

		.content-wrap {
			padding-bottom: 40rpx;
			padding-bottom: calc(40rpx + constant(safe-area-inset-top));
			padding-bottom: calc(40rpx + env(safe-area-inset-top));
		}

		.item-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;

			.left {
				display: flex;
				align-items: center;

				.img-avatar {
					width: 120rpx;
					height: 120rpx;
					margin-right: 32rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.name {
					color: rgba(0, 0, 0, 0.80);
					font-family: "PingFang SC";
					font-size: 32rpx;
					font-weight: 400;
				}


			}

		}
	}
</style>
